import { defineComponent } from "vue";
import style from "./index.module.less";
export default defineComponent({
  props: {
    text1: {
      type: String || Number,
      default: "",
    },
    text2: {
      type: String || Number,
      default: "",
    },
    width: {
      type: String,
      default: "156px",
    },
    height: {
      type: String,
      default: "87px",
    },
    bgColor: {
      type: String,
      default: "#F0F4FD",
      //   #CED6FF
    },
    padding: {
      type: String,
      default: "10px 0 0 0",
    },
    boxPadding: {
      type: String,
      default: "10px",
    },
  },

  setup(props, { slots }) {
    const renderCard = () => {
      return (
        <div
          class={[style["affluent1"]]}
          style={{
            width: props.width,
            height: props.height,
            padding: props.boxPadding,
            backgroundColor: props.bgColor,
          }}
        >
          {slots.default?.()}
          <div style={{ padding: props.padding }}>
            <div class={["font--t4 wt mb-3"]}>{props.text1}</div>
            <div class={["font--t1"]} style={{ color: "#A3A3A3" }}>
              {props.text2}
            </div>
          </div>
          {slots.top?.()}
        </div>
      );
    };
    return () => <div>{renderCard()}</div>;
  },
});
